<template>
<!-- 庭审大数据 -->
 <div class="main">
    <div class="left ">
      <box :data="stageData" title="各审判阶段全在线运行量">
        <listTable :data='stageData' :title="stageDataTitle"></listTable>
      </box>
      <box title="案由发布">
        <pieChart :data='briefDataList' :title="briefDataListTilte"></pieChart>
      </box>
    </div>
    <div class="center ">
      <box>
        <centerBox :data="allData.courtData" :data_top="allData" :title="centerTitle_2" :title_top="centerTitle_1"></centerBox>
      </box>
    </div>
    <div class="right ">
      <box title="全在线诉讼平台案件量">
        <barChart :data='caseNumDataOfMonth' :title="caseNumTitle"   ></barChart>
      </box>
      <box title="全在线适用率趋势图">
        <lineChart :data='ApplicableSendDataOfMonth' :title="ApplicableSendDataOfMonth_title"></lineChart>
      </box>
      <div class="main">
        <div class="left">
          <box :data="sendCycle" title="送达周期" >
            <semiCircleChart :data='sendCycle'  :per='sendCycle[0]?(sendCycle[0].value/15):0'  :title="sendCycleTitle"></semiCircleChart>
          </box>
        </div>
        <div class="right">
          <box title="审限周期">
            <semiCircleChart :colors="['#CF961BFF','#FFD725FF']"  :data='trialCycle' :max="180" :per='trialCycle[0]?(trialCycle[0].value/180):0'  :title="trialCycleTitle"></semiCircleChart>
          </box>
        </div>
      </div>
    </div>


 </div>
</template>
<script>
import { getChannelData } from '@/api/index.js'
import box from '_components/box/index.vue'
import echarts from '_components/echarts/echarts.vue'
import listTable from '@/views/boxContent/listTable.vue'
import pieChart from '@/views/boxContent/pieChart.vue'
import barChart from '@/views/boxContent/barChart.vue'
import lineChart from '@/views/boxContent/lineChart.vue'
import semiCircleChart from '@/views/boxContent/semiCircleChart.vue'
import centerBox from '@/views/boxContent/centerBox.vue'

export default {
  name: 'bigDataCourt',
  components: {
    box,
    echarts,
    listTable,
    pieChart,
    barChart,
    lineChart,
    semiCircleChart,
    centerBox
  },
  data () {
    return {

      // 各审判阶段全在线案件数:	stageData
      stageData:[],
      stageDataTitle:[
        {name:"在线立案",value:"zxlaNum"},
        {name:"在线送达(易送达)",value:"ysdNum"},
        {name:"在线举质证",value:"jzNum"},
        {name:"在线庭审",value:"zxtsNum"},
      ],
      //案由分布
      briefDataList:[],
      briefDataListTilte:['name','num'],
      //全在线诉讼平台案件量（月份显示）
      caseNumDataOfMonth:[],
      caseNumTitle:[
       'month','num'
      ],
      //适用率（送达适用率、庭审适用率）
      ApplicableSendDataOfMonth:[],
      ApplicableSendDataOfMonth_title:['month','num','dzNum'],
      //送达周期
      sendCycle:[],
      sendCycleTitle:['value','name',],
      // 审限周期 ：trialCycle
      trialCycle:[],
      trialCycleTitle:['value','name'],

      // 案件总数：
      allCaseCount:0,
      // 服务人数：
      allPersonCount:0,
      // 殿前，院部。禾山。自贸区：courtData
      // dqCount: 65,  殿前法庭
      // ybCount: 55,  院部
      // hsCount: 53,   禾山法庭
      // zmqCount: 32  自贸区法庭

      centerTitle_1:[
        {name:"2022年度全在线案件数",value:'caseCountOfYear',unit:'件'},
        {name:"全在线案件比例",value:'olPercent',unit:'%'},
        {name:"全在线平台累计运行案件",value:'allCaseCount',unit:'件'},
        {name:"服务群众(含代理人)",value:'allPersonCount',unit:'人'},
      ],
      centerTitle_2:[
        {name:"殿前法庭",value:'dqCount'},
        {name:"院部",value:'ybCount'},
        {name:"禾山法庭",value:'hsCount'},
        {name:"自贸区法庭",value:'zmqCount'},
      ],
      allData:{},
    }
  },
  props: {
  },

  created () {
    this.getData()
      this.centerTitle_1[0].name=`${this.$store.state.year}年度全在线案件数`

  },
  mounted () {
  },
  watch:{
    "$store.state.year"(a)
    {
      this.getData()
      this.centerTitle_1[0].name=`${a}年度全在线案件数`

    }
  },
  methods: {
    getData()
    {
      // console.log(1)
      let obj = {
        year:this.$store.state.year
      }
      getChannelData(obj).then(({code,data,msg})=>{

        this.stageData=data.stageData
        this.briefDataList=data.briefDataList
        this.caseNumDataOfMonth=data.caseNumDataOfMonth
        this.ApplicableSendDataOfMonth=data.ApplicableSendDataOfMonth
        this.sendCycle=[{value:data.sendCycle,name:"天"}]
        this.trialCycle=[{value:data.trialCycle?data.trialCycle:0,name:"天"}]
        this.allCaseCount=data.allCaseCount
        this.allPersonCount=data.allPersonCount

        this.allData=data
        // console.log(data.stageData)
      }).catch(res=>{
        // console.log(data)
        // this.stageData=data.stageData

      })
    }
  }
}
</script>

<style scoped >


.center >>> .box
{
  background-image:url(@/assets/image/framebigcenter.png);
  background-size: 100% 100%;
  border: none;
  height: 100%;



}
.center
{
  /* width: 42%; */
  flex: 10;
  overflow: auto;
  height: 100%;
  display: flex;
    flex-direction: column;
}
.left,.right
{
  flex: 6;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}
.main
{
  flex: 1 1 0%;
  display: flex;
  flex-direction: row;
  gap: 20px;
}
</style>
